<template>
  <div class="con">
    <div class="top" @click="handleA">头部固定</div>
    <div class="content">
      <p>中间内容区域</p>
    </div>
    <div class="bottom">底部输入框: <input focus="focus" blur="blur" /></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleA() {
      this.$router.push({
        // path: '/physicalReturnKey'
        path: '/physicalReturnKey2'
      });
    },
    blur() {
      document.body.style.height = '100%';
    },
    focus(e) {
      const originRect = e.target.getBoundingClientRect();
      let isFirst = false;

      setTimeout(() => {
        let rect = e.target.getBoundingClientRect();

        if (isFirst) {
          if (rect.top - originRect.top < 0) {
            // todo 设置body的height
            document.body.style.height =
              window.innerHeight - (originRect.top - rect.top) + 'px';
            e.target.scrollIntoView(false);
            return;
          }
        }
        e.target.scrollIntoView(false);

        setTimeout(() => {
          rect = e.target.getBoundingClientRect();
          // 某些机型下，得到的top为负值，直接使用window.innerHeight
          if (rect.top > 0) {
            document.body.style.height = window.innerHeight + 'px';
          } else {
            document.body.style.height =
              window.innerHeight - (originRect.top - rect.top) + 'px';
          }
          e.target.scrollIntoView(false);
        }, 100);

        isFirst = false;
      }, 100);
    }
  }
};
</script>

<style lang="scss" scoped>
.con {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bottom {
  height: 50px;
  background-color: #586c94;

  input {
    height: 100%;
  }
}

.top {
  height: 50px;
  background-color: #42b983;
}
.content {
  flex: 1;
  overflow: auto;

  p {
    height: 1000px;
  }
}
</style>
